<template>
  <div class="exception-page">
    <div class="img">
      <img :src="config.img" />
    </div>
    <div class="content">
      <h1 style="font-size: 72px!important;">{{config.title}}</h1>
      <div class="desc">{{config.desc}}</div>
      <div class="action">
        <a-button type="primary" @click="backHome">返回首页</a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const config = ref({
  img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
  title: '500',
  desc: '抱歉，服务器出错了'
})
const state = reactive({
  router: useRouter()
})
const backHome = () => {
  state.router.push({
    path: '/login'
  })
}
</script>

<style lang="scss" scoped>
.exception-page{
    width: 100%;
    height: calc(100vh - 50px);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    .img{
      padding-right: 52px;
      zoom: 1;
    img{
      max-width: 430px;
    }
  }
  .content{
    h1{
      color: #434e59;
      font-size: 72px;
      font-weight: 600;
      line-height: 72px;
      margin-bottom: 24px;
    }
    .desc{
      color: #555;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px;
    }
  }
}
</style>
